<template>
	<view class="blist">
		<view class="btitle">
			<view>{{list.title}}</view>
			<view>
				{{list.rank_desc}}
			</view>
			<view>
				更新时间： <text>{{list.next_update_date || '暂无'}}</text>
			</view>
		</view>
		
		
		<view class="list">
			<view class="item" v-for="(item,index) in list.topics" :key="index" @click="goDetails(item.id)">
				<view class="img">
					<image :src="item.cover_image_url" mode=""></image>
				</view>
				<view class="txt">
					<view class="tt">
						{{item.title}}
					</view>
					<view class="info">
						{{item.description}}
					</view>
					<view class="tags" >
						<view class="itemtag">
							暂无标签
						</view>
						<view class="itemtag" v-for="(item1,index) in item.tags" :key="index">
							{{item1}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:''
			}
		},
		
		onLoad(options) {
			let id = options.id
			uni.showLoading()
			uni.request({
				
				url:'/dpc/v2/pweb/rank/topics?rank_id=' + id,
				success: (res) => {
					uni.hideLoading()
					console.log(res)
					this.list = res.data.data.rank_info
				}
			})
		},
		
		
		// ifdef APP-PLUS
			onLoad(options) {
				let id = options.id
				uni.showLoading()
				uni.request({
					
					url:'/dpc/v2/pweb/rank/topics?rank_id=' + id,
					success: (res) => {
						uni.hideLoading()
						console.log(res)
						this.list = res.data.data.rank_info
					}
				})
			},
		//endif
		
		methods: {
			goDetails(id){
				
				uni.navigateTo({
					url:"../details/details?id=" + id
				})
			}
		}
	}
</script>

<style>
	.btitle{
		text-align: center;
		background: url("https://tn1-f2.kkmh.com/image/210708/SPaxABhlC.webp-w750.jpg");
		padding: 4%;
	}
	.btitle view{
		margin-bottom: 4%;
	}
	.btitle view:nth-child(1){
		font-size: 50rpx;
		color: #fff;
		margin-bottom: 4%;
		font-weight: 700;
	}
.btitle view:nth-child(2){
		font-size: 34rpx;
		color: #fff;
	}
	.btitle view:nth-child(3){
		font-size: 34rpx;
		color: #fff;
	}
	.list {
		padding: 0 2%;
	}
	.list .item{
		margin-top: 2%;
		padding: 2%;
		/* background-color: #007AFF; */
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #e0e0e0;
	}
	.list .item .img{
		width: 30%;
		height: 150rpx;
	}
	.list .item .img image{
		width: 100%;
		height: 100%;
	}
	.list .item .txt{
		width: 65%;
		height: 100%;
	}
	.list .item .txt .tt{
		font-size: 30rpx;
		font-weight: 700;
		color: #333;
	}
	.list .item .txt .info{
		font-size: 24rpx;
		color: #666;
		margin-top: 1%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.list .item .txt .tags {
		width: 60%;
		margin-top: 3%;
		display: flex;
		justify-content: start;
			
	}
	.list .item .txt .tags .itemtag{
	min-width: 25%;
	height: 40rpx;
	line-height: 40rpx;
	background-color: #ff557f;
	font-size: 24rpx;
	color: #fff;
	text-align: center;
	margin-left: 2%;
	padding: 0 5rpx;
	}
</style>
